<template>
    <!-- <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) in video" @click="onClick">
          
            <video :src="item.url" :autoplay="true" :loop="true" :muted="true" v-show="currentVideo === index"
                class="video"></video>
        </van-swipe-item>
    </van-swipe> -->
      <!-- <vue-video-player v-for="item in video" :sources="item.url" :cover="item.cover">
        </vue-video-player> -->
          <video v-for="(item, index) in video" :src="item.url" :autoplay="true" :loop="true" :muted="true" v-show="currentVideo === index"
                    class="video"></video>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const currentVideo = ref(0)
const video = ref([
    { title: '视频名称', url: 'http://vjs.zencdn.net/v/oceans.mp4', cover: 'https://p9-dcd-sign.byteimg.com/motor-article-img/30cbad2c2cd64e89b01cf8220a4a4227~tplv-f042mdwyw7-original:640:0.image?rk3s=87dec8b9&x-expires=1723774557&x-signature=H%2F6bRqt4myewLLqG6AB%2BgziOSl4%3D' },
    { title: '视频名称2', url: 'http://vjs.zencdn.net/v/oceans.mp4', cover: 'https://img.yzcdn.cn/public_files/2017/1' },
    { title: '视频名称3', url: 'http://vjs.zencdn.net/v/oceans.mp4', cover: 'https://img.yzcdn.cn/public_files/2017/1' },

])

const onClick = () => {
    // currentVideo.value++
    console.log("点击操作");

}

</script>
<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.video{
    width: 100vw;
    height: 30%;
}
</style>